<template>
  <div class="Upgrade">

    <div class="demo-block">
      <div style="font-weight: bold;">接口调用</div>
        <el-select v-model="selectValue" placeholder="请选择" style="margin-top: 20px" @change="changeSelect">
          <el-option-group
                  v-for="group in interfaces"
                  :key="group.label"
                  :label="group.label">
            <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
            </el-option>
          </el-option-group>
        </el-select>
        <el-button type="primary" style="margin-left: 20px" @click="submit" v-loading.fullscreen.lock="fullscreenLoading">发送请求</el-button>
        <el-table
                :data="tableData"
                stripe border
                style="width: 100%;margin-top: 10px;">
          <el-table-column
                  prop="key"
                  label="参数名称"
                  width="120">
          </el-table-column>
          <el-table-column
                  prop="value"
                  label="参数值"
                  width="580">
            <template slot-scope="scope">
              <el-button v-if="scope.row.key === 'token'" icon="el-icon-refresh" circle
                         size="mini" style="margin-left: 10px;float:right;"
                         type="warning"
                         @click="generateToken"></el-button>
              <el-date-picker v-if="scope.row.key === 'startTs' || scope.row.key === 'endTs'"
                      v-model="scope.row.value"
                      type="datetime"
                      placeholder="选择日期时间">
              </el-date-picker>
              <el-input v-else v-model="scope.row.value" placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column
                  prop="desc"
                  label="描述">
          </el-table-column>
        </el-table>

        <el-input
                v-show="isShow" autosize style="margin-top: 10px"
                type="textarea"
                placeholder=""
                v-model="result">
        </el-input>
      </div>
  </div>
</template>

<script>
export default {
    name: 'Upgrade',
    data() {
        return {
            fullscreenLoading: false,
            isShow :false,
            selectValue: '',
            result : '',
            currentInterface : '',
            interfaces: [{
                label: '通用接口',
                options: [{
                    value: 'chn-list',
                    label: '频道列表',
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    }]
                }, {
                    value: 'metas-info',
                    label: 'EPG详情',
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    },{
                        key: 'id',
                        value: '',
                        desc: 'ID'
                    },]
                }, {
                    value: 'ep-list',
                    label: '视频列表',
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    },{
                        key: 'id',
                        value: '',
                        desc: 'ID'
                    },{
                        key: 'stype',
                        value: '0',
                        desc: '此专辑的来源类型 0普通专辑 1来源专辑'
                    },{
                        key: 'epType',
                        value: '0',
                        desc: '所出剧集类型 0 只出正片(跟播剧时含预告片花) 1 只出非正片'
                    },{
                        key: 'pn',
                        value: '1',
                        desc: '页码，1 表示第一页'
                    },{
                        key: 'ps',
                        value: '120',
                        desc: '每页大小，最大为 120 条'
                    },]
                }, {
                    value: 'people',
                    label: '人物详情',
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    },{
                        key: 'id',
                        value: '',
                        desc: '人物 ID'
                    },]
                }, {
                    value: 'switch',
                    label: '频道开关',
                    disabled : true,
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    }]
                }, {
                    value: 'hot-count',
                    label: '热度播次详情',
                    disabled : true,
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    },{
                        key: 'ids',
                        value: '',
                        desc: '请求获取播次以及热度的id,多个id用逗号分隔,每次最多请求100个id'
                    }]
                }]
            }, {
                label: '数据接口',
                options: [{
                    value: 'snapshot',
                    label: '全量ID列表',
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    },{
                        key: 'chnId',
                        value: '',
                        desc: '频道ID'
                    },{
                        key: 'type',
                        value: '0',
                        desc: '返回的数据类型 1.3D类型 2.1080P类型 3.独播类型 4.VIP 默认为0表示查询所有类型数据'
                    }]
                }, {
                    value: 'change',
                    label: '增量ID列表',
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    },{
                        key: 'startTs',
                        value: '',
                        desc: '起始点时间的秒数，必须在近 7X24 小时内'
                    },{
                        key: 'endTs',
                        value: '',
                        desc: '结束点时间的秒数，必须在近 7X24 小时内'
                    },{
                        key: 'type',
                        value: '0',
                        desc: '返回的数据类型 1.3D类型 2.1080P类型 3.独播类型 4.VIP 默认为0表示查询所有类型数据'
                    },{
                        key: 'pn',
                        value: '1',
                        desc: '页码'
                    },{
                        key: 'lastId',
                        value: '0',
                        desc: '上一个请求取到的最后一个ID(也是最大 ID),pn=1 时,lastId=0'
                    }]
                }, {
                    value: 'change-supplement',
                    label: '增量ID列表(补数据)',
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    },{
                        key: 'startTs',
                        value: '',
                        desc: '起始点时间，只允许查询 7 日内的时间段'
                    },{
                        key: 'endTs',
                        value: '',
                        desc: '结束点时间，只允许查询 7 日内的时间段'
                    },{
                        key: 'type',
                        value: '0',
                        desc: '返回的数据类型 1.3D类型 2.1080P类型 3.独播类型 4.VIP 默认为0表示查询所有类型数据'
                    }]
                }, {
                    value: 'people-snapshot',
                    label: '人物全量ID列表',
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    }]
                }, {
                    value: 'people-change',
                    label: '人物增量ID列表',
                    params: [{
                        key: 'token',
                        value: '',
                        desc: '授权码'
                    },{
                        key: 'startTs',
                        value: '',
                        desc: '起始点时间的秒数，必须在近 7X24 小时内'
                    },{
                        key: 'endTs',
                        value: '',
                        desc: '结束点时间的秒数，必须在近 7X24 小时内'
                    },{
                        key: 'pn',
                        value: '1',
                        desc: '页码'
                    },{
                        key: 'lastId',
                        value: '0',
                        desc: '上一个请求取到的最后一个ID(也是最大 ID),pn=1 时,lastId=0'
                    }]
                }]
            }],
            tableData: [],
        }


    },
    methods: {
        changeSelect(val){
            this.isShow = false;
            for(let group of this.interfaces){
                for(let option of group.options){
                    if(option.value === val){
                        this.tableData = option.params;
                        this.currentInterface = option;
                        this.generateToken();
                    }
                }
            }
        },
        generateToken(){
            var token;
            this.axios.get('/iqy/token').then((response) => {
                this.tableData[0].value = response.data;
            }).catch((error) => {
                this.$notify.error({
                    title: '错误',
                    message:  error.response,
                    duration: 0
                });
            });
            return token;
        },
        submit(){
            this.fullscreenLoading = true;
            let submitParams = new URLSearchParams();
            submitParams.append('name', this.currentInterface.value);
            for(let param of this.currentInterface.params){
                if(param.key === 'startTs' || param.key === 'endTs'){
                    submitParams.append(param.key, param.value.getTime()/1000);
                }
                submitParams.append(param.key, param.value);
            }
            this.axios.post('/iqy/api/call',submitParams, {timeout: 1000 * 60 * 60 * 10}).then((response) => {
                console.log(response.data);
                this.result = JSON.stringify(response.data,null,4);
                this.isShow = true;
                this.fullscreenLoading = false;
            }).catch((error) => {
                this.$notify.error({
                    title: '错误',
                    message:  error.response,
                    duration: 0
                });
                this.fullscreenLoading = false;
            });
        }


    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .demo-block{
    border: 1px solid #ebebeb;
    border-radius: 3px;
    padding: 24px;
    margin-top: 10px;
  }
    .el-input{
        width: 80%;
    }


</style>
